<template>
  <div class="app-container">
    <div class="module-title">
      <svg-icon icon-class="chart" style="font-size:28px;margin-right:8px;"/>
      <span>新增成本核算</span>
      <span class="module-desc">添加新的生产工单成本核算明细</span>
    </div>
    
    <div class="module-card">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="calculation-form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工单号" prop="workOrder">
              <el-input 
                v-model="form.workOrder" 
                placeholder="请输入工单号"
                clearable
                @blur="validateWorkOrder"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工单数量" prop="orderQuantity">
              <el-input-number 
                v-model="form.orderQuantity" 
                :min="1"
                :precision="0"
                placeholder="请输入工单数量"
                style="width: 100%"
                @change="calculateTotalCost"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="物料名称" prop="materialName">
              <el-input 
                v-model="form.materialName" 
                placeholder="请输入物料名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物料规格" prop="specification">
              <el-input 
                v-model="form.specification" 
                placeholder="请输入物料规格"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="物料成本" prop="materialCost">
              <el-input-number 
                v-model="form.materialCost" 
                :min="0"
                :precision="2"
                placeholder="请输入物料成本"
                style="width: 100%"
                @change="calculateTotalCost"
              >
                <template slot="prepend">¥</template>
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="加工费用" prop="processingFee">
              <el-input-number 
                v-model="form.processingFee" 
                :min="0"
                :precision="2"
                placeholder="请输入加工费用"
                style="width: 100%"
                @change="calculateTotalCost"
              >
                <template slot="prepend">¥</template>
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="其他费用" prop="otherFees">
              <el-input-number 
                v-model="form.otherFees" 
                :min="0"
                :precision="2"
                placeholder="请输入其他费用"
                style="width: 100%"
                @change="calculateTotalCost"
              >
                <template slot="prepend">¥</template>
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工资" prop="salary">
              <el-input-number 
                v-model="form.salary" 
                :min="0"
                :precision="2"
                placeholder="请输入工资"
                style="width: 100%"
                @change="calculateTotalCost"
              >
                <template slot="prepend">¥</template>
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工具" prop="tool">
              <el-input 
                v-model="form.tool" 
                placeholder="请输入工具"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总成本" prop="totalCost">
              <el-input 
                v-model="form.totalCost" 
                placeholder="自动计算"
                disabled
                class="total-cost-input"
              >
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input 
                v-model="form.remark" 
                type="textarea"
                :rows="3"
                placeholder="请输入备注信息"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="24" class="form-actions">
            <el-button type="primary" @click="submitForm" :loading="submitLoading">
              <i class="el-icon-check"></i> 保存
            </el-button>
            <el-button @click="cancel">
              <i class="el-icon-close"></i> 取消
            </el-button>
            <el-button @click="resetForm">
              <i class="el-icon-refresh"></i> 重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addCalculation } from "@/api/calculation/calculation"

export default {
  name: "CalculationAdd",
  data() {
    return {
      // 提交加载状态
      submitLoading: false,
      // 表单参数
      form: {
        workOrder: null,
        orderQuantity: 1,
        materialName: null,
        specification: null,
        materialCost: 0,
        processingFee: 0,
        otherFees: 0,
        totalCost: 0,
        tool: null,
        salary: 0,
        remark: null
      },
      // 表单校验
      rules: {
        workOrder: [
          { required: true, message: "工单号不能为空", trigger: "blur" },
          { min: 3, max: 50, message: "工单号长度在 3 到 50 个字符", trigger: "blur" }
        ],
        orderQuantity: [
          { required: true, message: "工单数量不能为空", trigger: "blur" },
          { type: "number", min: 1, message: "工单数量必须大于0", trigger: "blur" }
        ],
        materialName: [
          { required: true, message: "物料名称不能为空", trigger: "blur" },
          { min: 2, max: 100, message: "物料名称长度在 2 到 100 个字符", trigger: "blur" }
        ],
        specification: [
          { max: 200, message: "物料规格长度不能超过 200 个字符", trigger: "blur" }
        ],
        materialCost: [
          { type: "number", min: 0, message: "物料成本不能为负数", trigger: "blur" }
        ],
        processingFee: [
          { type: "number", min: 0, message: "加工费用不能为负数", trigger: "blur" }
        ],
        otherFees: [
          { type: "number", min: 0, message: "其他费用不能为负数", trigger: "blur" }
        ],
        salary: [
          { type: "number", min: 0, message: "工资不能为负数", trigger: "blur" }
        ],
        tool: [
          { max: 100, message: "工具长度不能超过 100 个字符", trigger: "blur" }
        ],
        remark: [
          { max: 500, message: "备注长度不能超过 500 个字符", trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    /** 计算总成本 */
    calculateTotalCost() {
      const materialCost = parseFloat(this.form.materialCost) || 0
      const processingFee = parseFloat(this.form.processingFee) || 0
      const otherFees = parseFloat(this.form.otherFees) || 0
      const salary = parseFloat(this.form.salary) || 0
      
      this.form.totalCost = (materialCost + processingFee + otherFees + salary).toFixed(2)
    },
    
    /** 验证工单号 */
    validateWorkOrder() {
      if (this.form.workOrder) {
        // 这里可以添加工单号格式验证逻辑
        const workOrderPattern = /^[A-Z0-9-]+$/
        if (!workOrderPattern.test(this.form.workOrder)) {
          this.$message.warning('工单号格式不正确，建议使用大写字母、数字和连字符')
        }
      }
    },
    
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.submitLoading = true
          addCalculation(this.form).then(response => {
            this.$modal.msgSuccess("新增成功")
            this.submitLoading = false
            this.$router.back()
          }).catch(() => {
            this.submitLoading = false
          })
        }
      })
    },
    
    /** 取消按钮 */
    cancel() {
      this.$router.back()
    },
    
    /** 重置表单 */
    resetForm() {
      this.$refs["form"].resetFields()
      this.form = {
        workOrder: null,
        orderQuantity: 1,
        materialName: null,
        specification: null,
        materialCost: 0,
        processingFee: 0,
        otherFees: 0,
        totalCost: 0,
        tool: null,
        salary: 0,
        remark: null
      }
      this.calculateTotalCost()
    }
  },
  
  mounted() {
    this.calculateTotalCost()
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/styles/module-card.scss";

.module-title {
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: 700;
  color: #2980b9;
  margin-bottom: 18px;
  
  .module-desc {
    font-size: 14px;
    color: #888;
    font-weight: 400;
    margin-left: 18px;
  }
}

.calculation-form {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  
  .el-form-item {
    margin-bottom: 24px;
  }
  
  .el-input-number {
    width: 100%;
  }
  
  .total-cost-input {
    .el-input__inner {
      background-color: #f5f7fa;
      color: #e74c3c;
      font-weight: 700;
      font-size: 16px;
    }
  }
  
  .form-actions {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
    
    .el-button {
      margin: 0 10px;
      padding: 12px 24px;
      font-size: 14px;
      
      i {
        margin-right: 5px;
      }
    }
  }
}

.el-input-group__prepend {
  background: #f0f4fa;
  color: #2980b9;
  font-weight: 600;
  border-color: #dbeafe;
}

.el-textarea__inner {
  border-color: #dbeafe;
  
  &:focus {
    border-color: #2980b9;
  }
}

.el-input-number {
  .el-input__inner {
    text-align: left;
  }
}
</style> 